<template>
  <div class="container">
    <scroll-view :scroll-y="true"
                 :style="{'height': '100%'}">
      <div class="top">
        <div class="msg">
          <div class="icons"
               v-if="order_status==1||order_status==2||order_status==5">
            <img src="https://h5.ameimeika.com/mp_images/jiaoyi/daifukuan@2x.png"
                 mode="widthFix"
                 class="image">
          </div>
          <!-- 待付款 -->
          {{order_status==1?'待付款':''}}
          <!-- 待发货 -->
          {{order_status==2?'待发货':''}}
          <!-- 交易成功（待评价） -->
          {{order_status==3?'交易成功':''}}
          <!-- 已取消（交易关闭） -->
          {{order_status==4?'交易关闭':''}}
          <!-- 待收货 -->
          {{order_status==5?'待收货':''}}
          <!-- 交易成功（已评价） -->
          {{order_status==6?'交易成功':''}}
          <!-- 超时交易关闭 -->
          {{order_status==7?'交易关闭':''}}
          <!-- 交易正常关闭 -->
          {{order_status==8?'交易关闭':''}}
        </div>
        <div class="reason"
             v-if="order_status==7">（超时关闭）</div>
        <div class="reason"
             v-if="order_status==4">（已取消）</div>
        <div class="reason"
             v-if="order_data.order_status==8">（已退款）</div>
        <div class="tip"
             v-if="order_status==1">
          <p class="timer"
             v-if="order_data.cancel_time*1000-now_time>0">剩余：
            <span v-if="minutes[0]>0"
                  class="bord">{{minutes[0]+"时"}}</span>
            <span class="bord">{{minutes[1]+"分钟"}}</span>
          </p>
        </div>
      </div>
      <a class="dispatching_status"
         :href="'/pages/package_mine/logistics/main?order_sn='+order_data.order_sn"
         v-if="(order_status==3||order_status==5||order_status==6) && is_virtual != 1">
        <p class="status">
          {{order_data.logistics&&order_data.logistics.state==-1?'单号或代码错误':''}}
          {{order_data.logistics&&order_data.logistics.state==0?'暂无轨迹':''}}
          {{order_data.logistics&&order_data.logistics.state==1?'快递收件':''}}
          {{order_data.logistics&&order_data.logistics.state==2?'在途中':''}}
          {{order_data.logistics&&order_data.logistics.state==3?'已签收':''}} {{order_data.logistics&&order_data.logistics.state==4?'问题件':''}}
        </p>
        <img src="https://h5.ameimeika.com/mp_images/mp_2.0/wode/silun_car.png"
             class="siluncar"
             alt>
        <p class="timer">{{order_data.logistics==null?'暂无轨迹':order_data.logistics.last_time}}</p>
      </a>
      <!-- 地址 -->
      <div class="info">
        <p class="user_name">
          收货人：{{order_data.receiving_name}}
          <span class="tel">{{order_data.receiving_phone}}</span>
        </p>
        <div class="dv">
          <img src="https://h5.ameimeika.com/mp_images/shouye/dingwei@2x.png"
               alt
               class="icon_gps">
          <p class="address">收货人地址：{{order_data.receiving_address}}</p>
        </div>
        <div class="address_line"></div>
      </div>
      <!-- 商品详情 -->
      <div class="mall"
           v-for="(item,index) in order_data.shop_order_goods"
           :key="index">
        <div class="imgbox">
          <img @click="todetail(item)"
               :src="imgUrl+item.goods_image"
               alt
               class="mall_img">
        </div>
        <div class="info">
          <div @click="todetail(item)"
               class="mall_name">
            <div v-if="item.cross_border == 1"
                 class="icon"></div>
            {{item.goods_name}}
          </div>

          <div class="mall_num">×{{item.goods_num}}</div>
          <div class="mall_specs">{{item.goods_item_name}}</div>
          <div class="plus"
               v-if="item.plus_title&&item.plus_title!=''">
            {{item.plus_title}}
          </div>
          <div class="mall_price">
            <div class="money_cent">￥</div>
            {{item.goods_price}}
          </div>
        </div>

        <button class="service"
                @tap="to_service()"
                v-if="order_data.order_status==3&&order_data.past_order ==1">售后</button>
        <button class="service"
                @tap="to_service()"
                v-if="order_data.order_status==5 || order_data.order_status==2">退款</button>
        <div class="service services"
             v-if="order_data.order_status==8">已退款</div>
      </div>
      <!-- 订单详情 -->
      <div class="order-info">
        <div class="num">订单编号：{{order_data.order_sn}}</div>
        <div class="date">创建时间：{{order_data.timer_start}}</div>
        <div v-if="(order_status == 4 || order_status == 7 || order_status == 8) && order_data.order_status!=8"
             class="c_date">取消时间：{{order_data.timer_end}}</div>
      </div>
      <!-- 备注 -->
      <div v-if="order_data.user_remark !='' "
           class="note_book">
        <p class="beizhu">备注</p>
        <p class="beizhu_inp">{{order_data.user_remark}}</p>
      </div>
      <div class="price_detail">
        <p class="price_intro">
          <span class="price_intro_left">商品金额</span>
          <span class="price_intro_right">
            <i class="money_icon">¥</i>
            <i class="money_icon1">{{order_data.all_price}}</i>
          </span>
        </p>
        <p v-if="order_data.use_credit>0"
           class="price_intro">
          <span class="price_intro_left">积分抵扣</span>
          <span class="price_intro_right orange">
            <i class="money_icon">-</i>
            <i class="money_icon1">{{order_data.use_credit}}</i>
          </span>
        </p>
        <p v-if="order_data.ticket_money>0"
           class="price_intro">
          <span class="price_intro_left">优惠</span>
          <span class="price_intro_right">
            <i class="money_icon">-￥</i>
            <i class="money_icon1">{{order_data.ticket_money}}</i>
          </span>
        </p>
        <p v-if="order_data.member_discount>0"
           class="price_intro">
          <span class="price_intro_left">PLUS会员优惠</span>
          <span class="price_intro_right">
            <i class="money_icon">-￥</i>
            <i class="money_icon1">{{order_data.member_discount}}</i>
          </span>
        </p>
        <p class="price_intro">
          <span class="price_intro_left">运费</span>
          <span class="price_intro_right">
            <i class="money_icon">￥</i>
            <i class="money_icon1">{{order_data.freight_price}}</i>
          </span>
        </p>
        <p class="price_intro last_price">
          <span class="price_intro_left">合计</span>
          <span class="price_intro_right">
            <i class="money_icon">￥</i>
            <i class="money_icon1">{{order_data.order_price}}</i>
          </span>
        </p>
      </div>
      <div class="zhanwei"></div>
    </scroll-view>
    <!-- 按钮状态 -->
    <div class="btn-group"
         v-if="order_status!=2">
      <ul class="btns">
        <div class="btn btn-topay"
             v-if="order_status==1"
             @click.stop="topay()">去付款</div>
        <div class="btn btn-evaluate"
             v-if="(is_virtual == 1 && order_status == 3) || (is_virtual == 1 && order_status == 6)"
             @click="to_movieCard()">查看券码</div>
        <div class="btn btn-confirm"
             v-if="order_status==5"
             @click="receive_order()">确认收货</div>
        <div class="btn btn-evaluate"
             v-if="order_status==3"
             @click="toScoring()">评价</div>
        <div class="btn btn-cancel"
             v-if="order_status==1">
          <picker indicator-style="height:20px;"
                  @change="cancel_order"
                  :range="array">
            <view indicator-style="height:20px;"
                  class="picker">取消订单</view>
          </picker>
        </div>
        <div class="btn btn-delete"
             v-if="order_status==3 || order_status==4||order_status==6||order_status==7 ||order_status==8 ||order_status==9"
             @click="delete_order()">删除</div>
      </ul>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      ImgBaseUrl: common.image_resource,
      imgUrl: common.image_response,
      order_id: 0,
      order_status: 0,
      order_data: {},
      now_time: new Date().getTime(),
      minutes: [],
      goods_item_name: "",
      all_price: "",
      order_sn: "",
      order_ids: "",
      cancle_time: "",
      goods_num: 0,
      array: ["不想要了", "信息填错，重新购买", "卖家缺货", "其他"],
      is_virtual: 0
    };
  },
  onLoad (options) {
    Object.assign(this.$data, this.$options.data());
    wx.setNavigationBarTitle({
      title: "订单详情"
    });
    this.order_id = options.id;
  },
  onReady () {
    this.get_data();
  },
  onShow () {
    this.get_data();
  },
  methods: {
    to_service () {
      common.to_service()
    },
    time_format (str) {
      return new Date(str * 1000).Format("yyyy-MM-dd hh:mm:ss");
    },
    //跳转详情
    todetail (item) {
      wx.navigateTo({
        url: `/pages/package_mall/goods_detail/main?goods_id=${item.goods_id}`
      });
    },
    // 取消订单
    cancel_order (e) {
      let reason = parseFloat(e.mp.detail.value) + 1;
      let that = this;
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_2/orders/cancel",
        {
          id: this.order_id,
          cancel_reason: reason
        },
        response => {
          let res = response.data;
          if (res.status_code == 0) {
            common.mmk_Loading(2, "取消订单成功");
            setTimeout(() => {
              that.get_data();
            }, 1000);
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
      // if (that.order_data.use_credit > 0) {
      //   wx.showModal({
      //     title: "", //提示的标题,
      //     content: "订单取消后活动奖励积分不退回 ", //提示的内容,
      //     showCancel: true, //是否显示取消按钮,
      //     cancelText: "继续", //取消按钮的文字，默认为取消，最多 4 个字符,
      //     cancelColor: "#000000", //取消按钮的文字颜色,
      //     confirmText: "我再想想", //确定按钮的文字，默认为取消，最多 4 个字符,
      //     confirmColor: "#F64665", //确定按钮的文字颜色,
      //     success: res => {
      //       if (res.confirm) {
      //       } else if (res.cancel) {
      //         common.mmk_Loading(0);
      //         common.fly_post(
      //           "api/v4_2/orders/cancel",
      //           {
      //             id: this.order_id,
      //             cancel_reason: reason
      //           },
      //           response => {
      //             let res = response.data;
      //             if (res.status_code == 0) {
      //               common.mmk_Loading(2, "取消订单成功");
      //               setTimeout(() => {
      //                 that.get_data();
      //               }, 1000);
      //             } else {
      //               common.mmk_Loading(2, res.message);
      //             }
      //           }
      //         );
      //       }
      //     }
      //   });
      // } else {

      // }
    },
    // 去支付
    topay () {
      let goods_name = "";
      if (this.order_data.shop_order_goods.length > 1) {
        goods_name = this.goods_item_name + "等多件";
      } else {
        goods_name = this.goods_item_name;
      }
      common.wechat_pay(
        goods_name,
        this.order_sn,
        this.order_data.order_price,
        2
      );
    },
    // 删除订单
    delete_order () {
      let that = this;
      let del_tip = "";
      if (that.is_virtual == 0) {
        del_tip = "确认删除订单？";
      } else {
        del_tip = "请确认您订单内的票券已全部使用";
      }
      wx.showModal({
        title: "",
        content: del_tip,
        showCancel: true,
        cancelText: "取消",
        cancelColor: "#000000",
        confirmText: "确认",
        confirmColor: "#F64665",
        success: res => {
          if (res.confirm) {
            common.fly_post(
              "api/v4_2/orders/delete",
              {
                id: this.order_id
              },
              response => {
                let res = response.data;
                if (res.status_code == 0) {
                  common.mmk_Loading(2, "删除订单成功");
                  setTimeout(() => {
                    wx.navigateBack({
                      delta: 1
                    });
                  }, 1000);
                } else {
                  common.mmk_Loading(2, res.message);
                }
              }
            );
          }
        }
      });
    },
    // 确认收货
    receive_order () {
      let that = this;
      wx.showModal({
        title: "", //提示的标题,
        content: "确认收货？", //提示的内容,
        showCancel: true, //是否显示取消按钮,
        cancelText: "取消", //取消按钮的文字，默认为取消，最多 4 个字符,
        cancelColor: "#000000", //取消按钮的文字颜色,
        confirmText: "确认", //确定按钮的文字，默认为取消，最多 4 个字符,
        confirmColor: "#F64665", //确定按钮的文字颜色,
        success: res => {
          if (res.confirm) {
            common.fly_post(
              "api/v4_2/orders/receive",
              {
                id: this.order_id
              },
              response => {
                let res = response.data;
                if (res.status_code == 0) {
                  common.mmk_Loading(2, "确认收货成功");
                  setTimeout(() => {
                    that.get_data();
                  }, 1000);
                } else {
                  common.mmk_Loading(2, res.message);
                }
              }
            );
          }
        }
      });
    },
    //获取数据
    get_data () {
      let that = this;
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_2/orders/detail",
        {
          id: this.order_id,
          user_id: wx.getStorageSync('user_id') || 0
        },
        response => {
          let res = response.data;
          that.goods_item_name = res.data.shop_order_goods[0].goods_name;
          that.goods_num = res.data.shop_order_goods.length;
          that.all_price = res.data.all_price;
          that.order_sn = res.data.order_sn;
          that.order_id = res.data.id;
          that.order_ids = res.data.shop_order_goods[0].order_id;
          that.cancle_time = res.data.cancel_time;
          that.is_virtual = res.data.is_virtual;
          common.mmk_Loading(1);
          if (res.status_code == 0) {
            res.data.timer_start = this.time_format(res.data.created_at);
            res.data.timer_end = this.time_format(res.data.cancel_time);
            if (res.data.logistics) {
              res.data.logistics.last_time = this.time_format(
                res.data.logistics.last_time
              );
            }
            this.order_status = res.data.order_status;
            this.order_data = res.data;
            this.GetRTime(res.data.cancel_time)
            // let second_time =
            //   res.data.cancel_time / 60 - this.now_time / 1000 / 60;
            // if (second_time.toFixed(0) <= 0) {
            //   that.more_time = 0;
            // } else {
            //   that.more_time = second_time.toFixed(0);
            // }
          }
        }
      );
    },
    //倒计时
    GetRTime (_time) {
      let that = this;
      let now_time = Date.parse(new Date()) / 1000;
      let cha_timestamp = _time - now_time;
      let sy_day = parseInt(cha_timestamp / (3600 * 24));
      let sy_hour = parseInt((cha_timestamp - sy_day * 3600 * 24) / 3600);
      if (sy_hour < 10) {
        sy_hour = "0" + sy_hour;
      }
      let sy_min = parseInt(
        (cha_timestamp - sy_hour * 3600 - sy_day * 24 * 3600) / 60
      );
      if (sy_min < 10) {
        sy_min = "0" + sy_min;
      }
      that.minutes = [sy_hour, sy_min];
    },
    //去评价
    toScoring () {
      if (this.order_data.shop_order_goods.length > 1) {
        wx.navigateTo({
          url: "/pages/package_mall/scoring_goodslist/main?order_id=" + this.order_id
        });
      } else {
        wx.navigateTo({
          url:
            "/pages/package_mall/scoring_goods/main?order_id=" +
            this.order_id +
            "&goods_id=" +
            this.order_data.shop_order_goods[0].goods_id
        });
      }
    },
    //查看券券码
    to_movieCard () {
      wx.navigateTo({
        url: "/pages/package_mall/movie_card_detail/main?ticket_id=" + this.order_id
      });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  box-sizing: border-box;
  background: #f3f4f6;
  height: 100%;
  .top {
    width: 100%;
    height: 55px;
    background: url("https://h5.ameimeika.com/mp_images/jiaoyi/beijing@2x.png")
      no-repeat;
    background-size: cover;
    position: relative;
    .msg {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 17px;
      font-family: "Medium";
      color: rgba(255, 255, 255, 1);
      .icons {
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-right: 10px;
        position: relative;
        top: -2px;
        .image {
          width: 100%;
          height: 100%;
          vertical-align: middle;
        }
      }
    }
    .reason {
      position: absolute;
      left: 24%;
      top: 39%;
      color: rgba(255, 255, 255, 1);
    }
    .tip {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      .timer,
      .money {
        font-size: 17px;
        color: rgba(255, 255, 255, 1);
        line-height: 17px;
        text-align: right;
      }
      .timer {
        font-family: "Medium";
      }
    }
  }
  // 配送进度
  .dispatching_status {
    padding: 15px 44px;
    position: relative;
    background: #fff;
    border-bottom: solid 1px #dddddd;
    .status {
      font-size: 14px;
      font-family: "Regular";
      color: rgba(102, 102, 102, 1);
      margin-bottom: 5px;
    }
    .siluncar {
      position: absolute;
      top: 27px;
      left: 12px;
      width: 20px;
      height: 20px;
    }
    .timer {
      font-size: 12px;
      font-family: "Regular";
      color: rgba(136, 136, 136, 1);
    }
  }
  .info {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    background: #ffffff;
    .user_name {
      width: 100%;
      box-sizing: border-box;
      font-size: 14px;
      color: #444;
      padding: 10px 43px 5px;
      position: relative;
      .tel {
        position: absolute;
        right: 5%;
        color: #666;
      }
    }
    .dv {
      padding: 0 15px;
      .icon_gps {
        width: 25px;
        height: 25px;
        vertical-align: top;
        margin-right: 3.5px;
        position: relative;
        left: -4px;
        top: -7px;
      }
      .address {
        display: inline-block;
        width: 85%;
        font-size: 12px;
        color: #444;
      }
    }

    .address_line {
      width: 100%;
      height: 4px;
      background-image: url("https://h5.ameimeika.com/mp_images/jifenshangcheng/dingdanqueren/dizhitiao@2x.png");
      background-repeat: no-repeat;
      margin-top: 4px;
    }
  }
  .mall {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 15px;
    position: relative;
    border-bottom: solid 1px #eeeeee;
    background: #ffffff;
    display: flex;
    .imgbox {
      .mall_img {
        width: 70px;
        height: 70px;
        border-radius: 3px;
        background-color: salmon;
        margin-right: 10px;
        vertical-align: top;
      }
    }
    .info {
      flex: 1;
      .mall_name {
        color: #444;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        .icon {
          width: 40px;
          height: 14px;
          display: inline-block;
          background: url("https://img.ameimeika.com/h5_images/mp_images/mp_3.0/mall/kuajing.png")
            no-repeat;
          background-size: 100% 100%;
        }
      }
      .plus {
        padding: 0 5px;
        margin: 4px 0;
        line-height: 16px;
        font-size: 10px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        background-image: url(https://img.ameimeika.com/h5_images/mp_images/mp_3.0.2/plus_bg%402x.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        display: inline-block;
      }
      .mall_num {
        font-size: 14px;
        color: #444;
        float: right;
      }
      .mall_specs {
        color: #888;
        height: 19px;
        overflow: hidden;
      }
      .mall_price {
        font-size: 14px;
        color: #ff383e;
        .money_cent {
          font-size: 11px;
          display: inline-block;
          vertical-align: bottom;
          position: relative;
          top: 0px;
          left: 4px;
        }
      }
    }

    button::after {
      border: none;
    }
    .service {
      // width: 52px;
      height: 24px;
      text-align: center;
      font-size: 12px;
      font-family: "Regular";
      color: #f64665;
      position: absolute;
      background: #fff;
      right: 0;
      bottom: 10px;
    }
    .services {
      bottom: 5px;
      right: 20px;
    }
  }
  .order-info {
    width: 100%;
    background-color: #fff;
    padding: 15px;
    font-size: 12px;
    font-family: "Regular";
    color: rgba(102, 102, 102, 1);
    margin: 10px 0 60px;
    margin-bottom: 10px;
    .num {
      margin-bottom: 10px;
    }
    .c_date {
      margin-top: 10px;
    }
  }
  .note_book {
    margin-bottom: 10px;
    padding: 12px 15px;
    overflow: hidden;
    background: #ffffff;
    .beizhu {
      float: left;
      width: 12%;
      top: -1px;
      color: #333333;
      position: relative;
      font-size: 14px;
      font-weight: bold;
    }
    .beizhu_inp {
      float: left;
      width: 260px;
      color: #333333;
      position: relative;
      opacity: 0.9;
      top: 0;
    }
  }
  //价格明细
  .price_detail {
    font-size: 12px;
    padding: 2px 15px;
    background: #fff;
    .price_intro {
      margin-top: 5px;
      .price_intro_left {
        display: inline-block;
        width: 50%;
        text-align: left;
        color: #333333;
        font-weight: 600;
      }
      .price_intro_right {
        font-size: 16px;
        display: inline-block;
        width: 50%;
        text-align: right;
        color: #ff383e;
        .money_icon {
          font-size: 12px;
          display: inline;
        }
        .money_icon1 {
          font-size: 16px;
          display: inline-block;
        }
      }
      .orange {
        color: #ff7100;
      }
    }
    .last_price {
      border-top: solid 1px #e0e0e0;
      margin-top: 8px;
      padding: 6px 0;
    }
  }
  .zhanwei {
    width: 100%;
    height: 100px;
  }
  .btn-group {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 50px;
    width: 100%;
    background-color: #fff;
    z-index: 999;
    box-shadow: 0 -1px 6px 1px rgba(0, 0, 0, 0.03);
    .btns {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      .btn {
        height: 32px;
        line-height: 32px;
        text-align: center;
        padding: 0 12px;
        float: right;
        margin-left: 15px;
      }
      .btn-cancel,
      .btn-delete {
        border-radius: 18px;
        border: 1px solid #666666;
        font-size: 12px;
        font-family: "Regular";
        color: rgba(102, 102, 102, 1);
      }
      .btn-topay,
      .btn-confirm,
      .btn-evaluate {
        color: rgba(255, 56, 62, 1);
        border-radius: 18px;
        border: 1px solid rgba(255, 56, 62, 1);
        font-size: 12px;
        font-family: "Regular";
        background: #ffffff;
      }
      .btn-topay {
        background: rgba(255, 56, 62, 1);
        color: #fff;
        padding: 0 20px;
      }
    }
  }
}
</style>


